<template>
  <div class="w-[90%] h-full p-2 flex">
    <!-- 工程列表 -->
    <div class="bg-[#bdc3c7] w-[240px] p-2 rounded-sm shadow-sm shadow-slate-400">
      <div class="bg-[#34495e] h-10 px-2 flex items-center justify-between">
        <div class="flex items-center gap-2 font-bold">
          <ListView theme="outline" size="16" fill="#fff" />
          <span class="text-sm">工程列表</span>
        </div>
        <el-button link size="small" @click="openAddProjDialog">
          <Plus theme="outline" size="16" fill="#fff" />
        </el-button>
      </div>

      <!-- 单个工程 -->
      <router-link
        class="group w-full rounded-sm h-10 px-2 bg-[#16a085] flex items-center justify-between cursor-pointer gap-1 my-1 shadow-sm shadow-slate-400 hover:bg-[#1abc9c]"
        :to="{ name: 'zone-list', params: { id: proj.id } }"
        v-for="proj of projs"
        :key="proj.id">
        <div class="flex items-center gap-1">
          <Log theme="outline" size="16" fill="#fff" />
          <span class="text-white text-center text-sm">{{ proj.shortName }}</span>
        </div>
        <!-- 删除 -->
        <el-button link size="small" @click="delProj(proj)" class="hidden group-hover:block">
          <DeleteFour theme="outline" size="14" fill="#fff" />
        </el-button>
      </router-link>
    </div>

    <!-- 右侧列表 -->
    <div class="w-full h-full">
      <router-view />
    </div>

    <!-- dialog -->
    <AddProjDialog :visiable="addDialogVisiable" @closed="closed" />
  </div>
</template>

<script setup lang="ts">
import AddProjDialog from '@/components/dialog/AddProj.vue'
import useProj from '@/composables/useProj'
import type { ProjModel } from '@/types/model'
import { DeleteFour, ListView, Log, Plus } from '@icon-park/vue-next'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'

const addDialogVisiable = ref(false)
const { all, del, projs } = useProj()

function openAddProjDialog() {
  addDialogVisiable.value = true
}

async function delProj(model: ProjModel) {
  await ElMessageBox.confirm(`是否删除"${model.shortName}"工程?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await del(model.id!)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
  await all()
}

async function closed() {
  addDialogVisiable.value = false
  await all()
}

async function init() {
  await all()
}

init()
</script>
